<template>
  <ul class="footer fixed bottom-0 left-0 right-0 h-16vw bg-white border-t border-gray-300 flex justify-around items-center">
    <li
        v-for="(item, index) in navItems"
        :key="index"
        class="flex flex-col justify-center items-center text-gray-500 cursor-pointer pt-1.5vw"
        @click="navigateTo(item.route)"
    >
      <i :class="item.icon" class="text-5vw"></i>
      <p class="text-2.8vw mt-1vw">{{ item.label }}</p>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

// 导航项配置
const navItems = [
  { icon: 'fa fa-home', label: '首页', route: 'Home' },
  { icon: 'fa fa-compass', label: '发现', route: '' },
  { icon: 'fa fa-file-text-o', label: '订单', route: 'orderList' },
  { icon: 'fa fa-user-o', label: '我的', route: 'my' }
]

// 导航功能
const navigateTo = (routeName: string) => {
  if (routeName) {
    router.push({ name: routeName })
  }
}
</script>

<style scoped>
/* 激活状态样式 */
.footer li.active {
  color: #0097FF;
}

.footer li.active i {
  color: #0097FF;
}
</style>
